<template>
  <div class="com-container">
    <div class="com-chart" ref="hot_ref"></div>
    <span class="iconfont arr-left" @click="currentLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="currentRight" :style="comStyle">&#xe6ed;</span>
    <span class="cat-name" :style="comStyle">{{cat}}</span>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getThemeValue} from '../utils/theme_utils'
export default {
  name: "",

  data() {
    return {
      echarts: null,
      echartsInit: null,
      allData: null,
      currentIndex: 0,
      titleSize: null
    };
  },
  computed: {
    ...mapState(['theme']), //映射属性

    cat() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.currentIndex].name;
      }
    },
    comStyle() {
      return { fontSize: this.titleSize + 'px' ,
                color:getThemeValue(this.theme).titleColor
      };
    }
  },
  mounted() {
    this.Init();
    this.getData();
    window.addEventListener("resize", this.screenData);
    this.screenData();
  },

  destroyed() {
    window.removeEventListener("resize", this.screenData);
  },

  methods: {
    currentLeft() {
      this.currentIndex++;
      if (this.currentIndex > this.allData.length - 1) {
        this.currentIndex = 0;
      }

      this.upData();
    },
    currentRight() {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        this.currentIndex = this.allData.length - 1;
      }

      this.upData();
    },
    Init() {
      this.echarts = require("echarts");
      this.echartsInit = this.echarts.init(this.$refs.hot_ref, this.theme);
      const initOption = {
        title: {
          text: "|商家销售统计表",
          textStyle: {
            fontWeight: "bold"
          },
          top: 20
        },
        legend: {
          top: "15%",
          icon: "circle"
        },
        tooltip: {
          show: true,
          formatter: arg => {
            const argArr = arg.data.children;
            //console.log(argArr)
            let total = 0;
            argArr.forEach(item => {
              total += item.value;
            });
            let retStr = "";
            argArr.forEach(item => {
              retStr += `${item.name}:${parseInt((item.value / total) * 100) +
                "%"}<br/>`;
            });
            return retStr;
          }
        },
        series: [
          {
            type: "pie",
            label: {
              //饼图图形上的文本标签
              show: false
            },
            emphasis: {
              //高亮的扇区和标签样式。
              label: {
                //文字
                show: true
              },
              labelLine: {
                //线
                show: false
              }
            }
          }
        ]
      };
      this.echartsInit.setOption(initOption);
    },
    getData() {
      this.axios.get("http://127.0.0.1:8888/api/hotproduct").then(response => {
        this.allData = response.data;
        //console.log(this.allData)
        this.upData();
      });
    },
    upData() {
      const serireArr = this.allData[this.currentIndex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children
        };
      });
      // console.log(serireArr);
      const upOption = {
        series: [
          {
            data: serireArr
          }
        ]
      };
      this.echartsInit.setOption(upOption);
    },
    screenData() {
      this.titleSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      const screenOption = {
        title: {
          textStyle: {
            fontSize: this.titleSize
          }
        },
        legend: {
          textStyle: {
            fontSize: this.titleSize / 2
          },
          itemWidth: this.titleSize / 2, //图例前面球的大小
          itemHeight: this.titleSize / 2,
          itemGap: this.titleSize / 2 //图例与图例之间的间隔
        },
        series: [
          {
            radius: this.titleSize * 4.5, //饼图的半径
            center: ["50%", "50%"] //让饼图一直处于界面的正中央
          }
        ]
      };
      this.echartsInit.setOption(screenOption);
      this.echartsInit.resize();
    }
  },
  watch:{
    theme(){
      this.echartsInit.dispose()
      this.Init()
      this.screenData()
      this.upData()
    }
  }
};
</script>
<style>
.arr-left {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.arr-right {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}
.cat-name {
  position: absolute;
  left: 80%;
  bottom: 20px;
  color: white;
}
</style>
